<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
      .card {
        border: 1px gray solid;
        border-radius: 10px;
        padding: 15px;
      }
      
      .card-title {
        font-size: 15px;
        font-weight: bold;
        margin: 10px 10px 10px 0px;
      }
      
      .card-body {
        grid-template-columns: repeat(3, 200px);
      }
      
      .card-body > div {
        color: darkgray;
        background: pink;
        height: 60px;
      }
    </style>
  </head>
  <body>
    <!--grid-gap属性设置沟槽间距，该属性是行沟槽间距grid-row-gap和列沟槽间距grid-column-gap的结合体，其属性值可为长度或百分比，不可为fr值。grid-gap可被简写为gap，为提升代码健壮性可将其都写上-->
    <div class="card">
      <div class="card-title">[row-gap: 20px;grid-row-gap: 20px]</div>
      <div class="card-body" style="display: grid;row-gap: 20px;grid-row-gap: 20px">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
      </div>
    </div>
    <br>
    <div class="card">
      <div class="card-title">[column-gap: 20px;grid-column-gap: 20px]</div>
      <div class="card-body" style="display: grid;column-gap: 20px;grid-column-gap: 20px">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
      </div>
    </div>
    <br>
    <div class="card">
      <div class="card-title">[gap: 20px 30px;grid-gap: 20px 30px]</div>
      <div class="card-body" style="display: grid;gap: 20px 30px;grid-gap: 20px 30px">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
      </div>
    </div>
  </body>
</html>